<template>
  <div>
    <div v-if="awesome" @click="publishedBooks">1234</div>

    {{ author }}
    <p>Has published books:</p>
    <span>{{ author.books.length > 0 ? 'Yes' : 'No' }}</span>
    <h2>{{ publishedBooksMessage }}</h2>
    {{ publishedBooksCount }}
    {{ publishedBooks() }}
    {{ publishedBooksCount }}
    {{ publishedBooks() }}
    {{ publishedBooksCount }}
    {{ publishedBooks() }}
    {{ publishedBooksCount }}
    {{ publishedBooks() }}
    {{ publishedBooksCount }}
    {{ publishedBooks() }}
    {{ publishedBooksCount }}
    {{ publishedBooks() }}
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'

const awesome = ref(true)

const author = ref({
  name: 'John Doe',
  books: [
    'Vue 2 - Advanced Guide',
    'Vue 3 - Basic Guide',
    'Vue 4 - The Mystery'
  ]
})
const publishedBooksMessage = computed(() =>
  author.value.books.length > 1 ? 'Yes' : 'No'
)

const publishedBooksCount = computed(() => {
  console.log(2)
  return author.value.books.length
})

const publishedBooks = () => {
  console.log(1)
  return 'publishedBooks'
}
</script>

<style lang="scss" scoped></style>
